<template>
  <div class="tags">
    <!-- <a-tag v-for="(item, index) in tags" :key="index" :closable="item.name !== 'Home'"
            @click="changRouter(item)" @close="handleClose(item, index)">
            <a-button :style="{ color: route.name === item.name ? '' : '#bfbfbf',fontSize: '12px' }" type="editable-card" size="small">{{
                item.meta.title }}</a-button>
        </a-tag> -->
    <a-tabs hide-add v-model:activeKey="currenTab" type="editable-card">
      <a-tab-pane
        v-for="(item, index) in tags"
        :key="item.name"
        :closable="item.name !== 'Home'"
      >
        <template #tab>
          <span @click="changRouter(item)">{{ item.meta.title }}</span>
        </template>
        <template #closeIcon>
          <CloseOutlined @click="handleClose(item, index)" />
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import router from "@/router";
import { useBreadcrumbStore } from "@/stores/models/breadcrumb";
import { useRoute } from "vue-router";

const route = useRoute();
const breadcrumbStore = useBreadcrumbStore();
const tags = ref([]);
tags.value = breadcrumbStore.tagList;
const currenTab = ref(route.name);

//监听面包屑变化
watch(
  () => breadcrumbStore.breadcrumb,
  () => {
    currenTab.value = breadcrumbStore.breadcrumb.name;
  }
);

//点击面包屑切换路由
const changRouter = (item) => {
  currenTab.value = item.name;
  router.push({ name: item.name });
};

//移除面包屑逻辑
const handleClose = (item, index) => {
  let length = tags.value.length - 1;
  //移除pina中的面包屑
  breadcrumbStore.clearTags(item);
  if (item.name !== route.name) {
    return;
  }
  if (index === length) {
    currenTab.value = tags.value[index - 1].name;
    router.push({ name: tags.value[index - 1].name });
  } else {
    router.push("/");
  }
};
</script>
<style scoped lang='scss'>
.tags {
  padding: 0 20px;
}
</style>